<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>年会弹幕</title>
    <meta name="viewport" content="width=device-width,user-scalable=no" /> 
    <style type="text/css">
        *{padding:0;margin:0;}
        html,body {
            height: 100%;
            font-family: '微软雅黑';
            max-width:750px;
            margin:0 auto;
        }
        .header{
            height:40px;
            line-height: 40px;
            text-align: center;
            border-bottom:solid 1px #eee;
            margin-bottom:20px;
            background: #f5f5f5;
        }
        .contener{
            margin:0 15px;
        }
        #wrapper {
            width: 100%;
            position: fixed;
            left:0;
            top:0;
            z-index:1;
            height: 100%;
            background: url('img/default_big_img.png') no-repeat center center;
            background-size:100% auto; 
            opacity: .2;
            z-index:-1;
        }
        
        #submit-buts{
            margin-top:25px;
            overflow: hidden;
            text-align: right;
            position: fixed;
            left:5%;
            width:90%;
            bottom:10px;
        }
        #submit-buts button{
            display: inline-block;
            width:100%;
            padding:10px 20px;
            background: orange;
            color:#fff;
            text-decoration: none;
            font-size:16px;
            border:none;
            cursor:pointer;
            font-family: '微软雅黑';
        }
        #submit-buts button[disabled=disabled] {
            background: #ccc;
            color: #000;
        }
        
        .edui-btn,.edui-btn-toolbar,.edui-splitbutton{
            height:25px!important;
        }
        #myEditor{
            padding:10px;
        }
        #myEditor p{
            display: flex;
            align-items: center;
        }
        #myEditor img{
            margin:0 5px;
            width:30px;
            height:30px;
        }
        .edui-popup-emotion{
            width:100%!important;
        }
        .miss{
            position: fixed;
            left:0;
            top:0;
            width:100%;
            height:100%;
            background: transparent;
            z-index:120000000000;
            display: flex;
            justify-content: center;
        }
        .none{display: none;}
        .miss span{
            display: inline-block;
            width:130px;
            height:40px;
            line-height: 40px;
            border-radius:5px;
            background: rgba(0,0,0,.5);
            color:#fff;
            font-size:12px;
            text-align: center;
            margin-top:40%;
            animation: maskanimation 0.3s;
        }
        @keyframes maskanimation {
            from {transform: scale(0,0);}
            to {transform: scale(1,1);}
        }
        .mask{
            width:100%;
            height:100%;
            position: fixed;
            z-index:10000000;
            left:0;
            top:0;
            background:rgba(0,0,0,.3) url('img/loading.gif') no-repeat center center;
        }
        .edui-container{
            opacity: .9;
        }
        .edui-btn-emotion{
            width: 100%!important;
            display: flex!important;
            justify-content: center!important;
            align-items: center!important;
        }
    </style>
    <link href="umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script src="umeditor/third-party/jquery.min.js"></script>
    <script charset="utf-8" src="umeditor/umeditor.config.js"></script>
    <script charset="utf-8" src="umeditor/umeditor.js"></script>
    <script src="umeditor/lang/zh-cn/zh-cn.js"></script>
  </head>
  <body>
    <div class="header">启明星年会弹幕</div>
    <div class="contener">
        <div id="wrapper">
        </div>
        <!--style给定宽度可以影响编辑器的最终宽度-->
        <script type="text/plain" id="myEditor" style="width:100%;height:350px;">
        </script>
        <!-- 提交按钮 -->
        <div id="submit-buts">
            <button href="javascript:;" id="submit" class="submit">发射</button>
        </div>
    </div>
    <div class="mask none"></div>
    <div class="miss none">
        <span>发表成功!</span>
    </div>
<script src="./js/zepto.min.js"></script>
<script type="text/javascript">
    //实例化编辑器
    var um = UM.getEditor('myEditor');
    var isClick=true;

    $('#submit').on('click',function(){
        if(!isClick) return false;
        isClick=false;
        $('div.mask').removeClass('none');
        $(this).attr('disabled','disabled');

        var data = UM.getEditor('myEditor').getContent();
        $.ajax({
            url:'https://test2.dms.morning-star.cn/nyp/api/message/sendMsg',
            data:{msg:data},
            success:function(data){
                $('#myEditor').html('');
                $('div.mask').addClass('none');
                $('div.miss').removeClass('none');
                isClick=true;
                $('#submit').removeAttr('disabled');
                setTimeout(function(){
                    $('div.miss').addClass('none');
                }, 2000);
            }
        })
    });

    $('div.miss').click(function(){
        $('div.miss').addClass('none');
    });

</script>
  </body>
</html>